<template>
	<div class="edit-h5">
		<main class="edit-h5-main">
			<header class="edit-h5-header">
				<aside class="left">
					<h3>是否允许群内成员相互加好友</h3>
				</aside>
				<span class="close" @click="close('isifriend')">{{
          TUITranslateService.t(`关闭`)
        }}</span>
			</header>
			<div class="notification">
				<footer v-if="isAuthorNotification" class="footer">
					<Slider :open="openisifriend" @change="setAllMuteTime" />
					<button class="btn" @click="updateProfile">
						确定
					</button>
				</footer>
			</div>
		</main>
	</div>
</template>

<script lang="ts" setup>
	import { nextTick } from '../../../adapter-vue';
	import {
		TUITranslateService,
		TUIGroupService,
		IGroupModel,
	} from '@tencentcloud/chat-uikit-engine';
	import { watchEffect, ref } from '../../../adapter-vue';
	import { Toast, TOAST_TYPE } from '../../common/Toast/index';
	import { isUniFrameWork } from '../../../utils/env';
	import Slider from '../../common/Slider/index.vue';
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		isAuthor: {
			type: Boolean,
			default: false,
		},
	});

	const groupProfile = ref<IGroupModel>({});
	const openisifriend = ref(false);
	const isAuthorNotification = ref(false);
	const slidervalue = ref(false);
	watchEffect(() => {
		groupProfile.value = props.data;
		openisifriend.value = Boolean(groupProfile.value.isifriend)
		isAuthorNotification.value = props.isAuthor;
	});
	const setAllMuteTime = (value : boolean) => {
		slidervalue.value = value
	};
	const emits = defineEmits(['update', 'close']);

	const updateProfile = () => {
		let promise = TUIGroupService.updateGroupProfile({
			groupID: groupProfile.value.groupID,
			groupCustomField: [{ key: 'isifriend', value: String(slidervalue.value) }]
		});
		promise.then((res) => {
			const result = res.data.group.groupCustomField.find(item => item.key === "isifriend");
			if (result) {
				if (result.value === "false") {
					openisifriend.value = false
					groupProfile.value.isifriend = false
					emits('isifriend', false);
				} else {
					openisifriend.value = true
					groupProfile.value.isifriend = true
					emits('isifriend', true);
				}
			} else {
				console.log("未找到 'isifriend' 键");
			}
			Toast({
				message: '修改成功',
			});
		});
		promise.catch((error) => {
			console.log('捕获异常进行错误处理', error)
		});
		emits('update', { key: 'isifriend', value: setAllMuteTime });
	};

	const close = (tabName : string) => {
		emits('close', tabName);
	};
</script>

<style lang="scss" scoped>
	@import "../../../assets/styles/common";

	.notification {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		word-break: break-all;

		.row {
			flex: 1;
			font-size: 14px;

			.row-p {
				text-align: center;
				padding-bottom: 20px;
			}
		}

		.textarea {
			margin-bottom: 20px;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #e8e8e9;
			resize: none;
			font-size: 14px;
			height: 100%;
		}

		.uni-height {
			height: 20vh;
		}

		.footer {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px 10px;
		}
	}

	.btn {
		background: #3370ff;
		border: 0 solid #2f80ed;
		padding: 4px 28px;
		font-weight: 400;
		font-size: 12px;
		color: #fff;
		line-height: 24px;
		border-radius: 4px;

		&-cancel {
			background: #fff;
			border: 1px solid #ddd;
			color: #828282;
		}
	}

	.edit-h5 {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1;

		.edit-h5-main {
			background: #fff;
			flex: 1;
			padding: 18px;
			border-radius: 12px 12px 0 0;
			width: 80vw;
		}

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.close {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 18px;
				color: #3370ff;
				letter-spacing: 0;
				line-height: 27px;
			}
		}

		&-footer {
			display: flex;

			.btn {
				flex: 1;
				border: none;
				background: #147aff;
				border-radius: 5px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 16px;
				color: #fff;
				letter-spacing: 0;
				line-height: 27px;
				padding: 8px 0;

				&:disabled {
					opacity: 0.3;
				}
			}
		}
	}
</style>